<template>
  <div style="height:100%;overflow-y:auto">
      <el-card>
          <el-form
          :model="editTestinfoForm"
          ref="editTestinfoForm"
          :rules="testInfoRules"
          label-width="120px"
          :inline="true"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="标题:">
            <el-input v-model="editTestinfoForm.title" ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="8">
          <el-form-item label="科目:">
            <el-input v-model="editTestinfoForm.subject" ></el-input>
          </el-form-item>
            </el-col>
          <el-col :span="8">
          <el-form-item label="出题人:">
            <el-select v-model="editTestinfoForm.teacherNumber" placeholder="请选择出题人">
                <el-option
                v-for="item in teacherData"
                :key="item.id"
                :label="item.name"
                :value="item.accountNumber"
                ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
          <el-form-item label="班级:">
            <el-select v-model="editTestinfoForm.clazz" placeholder="请选择班级">
                <el-option
                v-for="item in classList"
                :key="item.id"
                :label="`${item.grade}年级${item.classNumber}班`"
                :value="item.id"
                ></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="总分:">
            <el-input v-model="editTestinfoForm.totalScore" ></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="及格线:">
            <el-input v-model="editTestinfoForm.passScore" ></el-input>
          </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
          <el-form-item label="参加答题开始时间:">
             <el-date-picker
                v-model="editTestinfoForm.examStart"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd hh:mm:ss" 
                value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="参加答题结束时间:">
            <el-date-picker
                v-model="editTestinfoForm.examEnd"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd hh:mm:ss" 
                value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="答题时长:">
            <el-input v-model="editTestinfoForm.limitTime" ></el-input>
          </el-form-item>
          </el-col>
           </el-row>
           <el-row>
             <el-col :span="24" style="display:flex;justify-content: flex-end;">
          <div style="">
            <el-form-item style="">
            <!-- 新增 -->
            <el-button type="primary" size="small"><a href="http://localhost:8081/OnlineOperatingSystem/questionStore/downloadTemplate"><span style="color:white">下载试题模板</span></a></el-button>
        </el-form-item>
          <el-form-item >
              <el-upload
                class="upload-demo"
                action="http://localhost:8081/OnlineOperatingSystem/questionStore/importQuestion"
                accept=".xlsx"
                :limit="1"
                :on-success="uploadSuccess">
                <el-button size="small" type="primary">点击上传</el-button>
             </el-upload>
          </el-form-item>
          <el-form-item>
              <el-button size="small" type="primary" @click="submit">提交试题</el-button>     
          </el-form-item>
          </div>
          </el-col>
          </el-row>
        </el-form>
         <!-- 数据列表-->
      <el-table
      v-if="questionList.length!='0'"
        :data="questionList.slice((currentPage-1)*PageSize,currentPage*PageSize)"
        border
        class="table"
        ref="multipleTable"
        highlight-current-row
        
      >
        <el-table-column
          prop="questionNumber"
          label="题号"
          min-width="10"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="试题类型"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="题目"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="optionA"
          label="A"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionB"
          label="B"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionC"
          label="C"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionD"
          label="D"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionE"
          label="E"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="optionF"
          label="F"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="rightAnswer"
          label="正确答案"
          min-width="20"
        ></el-table-column>
        <el-table-column
          prop="score"
          label="分值"
          min-width="40"
        ></el-table-column>
        <el-table-column
          prop="level"
          label="难易程度"
          min-width="45"
        >
            <template slot-scope="scope">
            <el-rate
            v-model="scope.row.level"
            disabled
            text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination" v-if="questionList.length!='0'">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="questionList.length"
        >
        </el-pagination>
      </div>
      </el-card>
  </div>
</template>

<script>
import webservice from '../../../api/webservice'
export default {
    data(){
        return{
            editTestinfoForm:{},
            testInfoRules:{},
            questionList:[],//试题
            // 默认显示第几页
        currentPage: 1,
        // 个数选择器（可修改）
        pageSizes: [10, 20,30,40,50],
        // 默认每页显示的条数（可修改）
        PageSize: 10,
        classList:[],
        teacherData:[]
        }
    },
    mounted(){
        this.getClassData()
        this.getUserData()
    },
    methods:{
        // 分页
    // 每页显示的条数
    handleSizeChange(val) {
        // 改变每页显示的条数 
        this.PageSize = val
        console.log(this.pageSizes)
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
        // 改变默认的页数
        this.currentPage = val
    },
    //获取班级
        getClassData() {
      webservice.HttpPost("/api/clazz/selectClazzList", '{}', (data) => {
        if (data.code === 200) {
          this.classList = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //获取人员信息
    getUserData() {
      let _param = {
        type:'1'
      };
       let _params = JSON.stringify(_param)
      webservice.HttpPost("/api/user/selectUserList", _params, (data) => {
        if (data.code === 200) {
          this.teacherData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
        uploadSuccess(response,file,fileList){
            this.questionList = response.data.questionList
        },
    submit(){
        let _param = {
        title:this.editTestinfoForm.title,
        subject:this.editTestinfoForm.subject,
        clazzId:this.editTestinfoForm.clazz,
        teacherNumber:this.editTestinfoForm.teacherNumber,
        totalScore:this.editTestinfoForm.totalScore,
        passScore:this.editTestinfoForm.passScore,
        examStart:this.editTestinfoForm.examStart,
        examEnd:this.editTestinfoForm.examEnd,
        limitTime:this.editTestinfoForm.limitTime,
        questionList:this.questionList
      };
       let _params = JSON.stringify(_param)
      webservice.HttpPost("/api/paper/insertPaper", _params, (data) => {
        if (data.code === 200) {
          this.$message.success({
            message: '提交成功！',
            showClose: true,
            duration: 1000,
          });
          this.$router.push('/testList')
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    }
    
}
</script>

<style>

</style>